<template>
  <div class="mainDiv">
    <header-view/>
    <div class="header-slide">
      <div  class="container" style="width: 80%">
        <div id="owl-demo" class="owl-carousel">

          <!--  <div class="item" v-for="(video,index) in videoFormData.carousel" :index="''" :key="index">
              <div class="zoom-container">
                <div class="zoom-caption">
                <span
                   v-bind:class="{ huikan : video.type === 0, moving : video.type === 1, overed: video.type === 2 }">{{ video.liveStatusName }}</span>
                  <a href="#" @click="toDetail(video)">
                    <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                  </a>
                  <p>{{ video.title }}</p>
                </div>
                <img :src="video.liveCenterImg"/>
              </div>
            </div>-->
          <div class="item" v-for="(video,index) in videoFormData.carousel" :index="''" :key="index">
            <div class="zoom-container" style="width: 100%">
              <div class="zoom-caption">
              <span
                v-bind:class="{ huikan : video.liveStatus === 0, moving : video.liveStatus === 1, overed: video.liveStatus === 2 }">{{ video.liveStatusName }}</span>
                <a href="#" @click="toDetail(video)">
                  <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                </a>
                <p>{{ video.title }}</p>
              </div>
              <img :src="video.liveCenterImg" class="carouselImg"/>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- /////////////////////////////////////////Content -->
    <div id="page-content" class="index-page">

      <div class="container" style="background-color: white;border-radius:10px;width: 85%;">
        <div class="row" style="margin: 0px;">
          <div class="featured">
            <div class="main-vid" v-if="videoFormData.mainVideo != null">
              <div class="col-md-6 col-sm-12">
                <div class="zoom-container">
                  <div class="zoom-caption">
                    <span
                      v-bind:class="{ huikan : videoFormData.mainVideo.liveStatus == 0, moving:  videoFormData.mainVideo.liveStatus ==1 ,
                       overed:  videoFormData.mainVideo.liveStatus === 2 } ">{{ videoFormData.mainVideo.liveStatusName }}</span>
                    <a @click="toDetail(videoFormData.mainVideo)">
                      <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                    </a>
                    <p>{{ videoFormData.mainVideo.title }}</p>
                  </div>
                  <img :src="videoFormData.mainVideo.liveCenterImg" class="mainImg"/>
                </div>
              </div>
            </div>
            <div class="sub-vid">
              <div class="col-md-3" v-for="(video,index) in videoFormData.subVideo" :index="''" :key="index">
                <div class="zoom-container">
                  <div class="zoom-caption">
                    <span
                      v-bind:class="{ huikan : video.liveStatus === 0, moving : video.liveStatus === 1, overed: video.liveStatus === 2 }">{{ video.liveStatusName }}</span>
                    <a @click="toDetail(video)">
                      <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                    </a>
                    <p>{{ video.title }}</p>
                  </div>
                  <img :src="video.liveCenterImg" class="subImg"/>
                </div>
              </div>
            </div>
            <div class="clear"></div>
          </div>
        </div>
        <div class="row">
          <div id="main-content" class="col-md-12 col-sm-12">
            <!--最新视频-->
            <div class="box">
              <div class="box-header">
                <h2><i class="fa fa-vimeo-square"></i> 最新视频</h2>
              </div>
              <div class="box-content">
                <div class="row">
                  <div class="col-md-4" v-for="(video,index) in videoFormData.newLasted" :index="''" :key="index">
                    <div class="wrap-vid">
                      <div class="zoom-container">
                        <div class="zoom-caption">
                        <span
                          v-bind:class="{ huikan : video.liveStatus === 0, moving : video.liveStatus === 1, overed: video.liveStatus === 2 }">{{ video.liveStatusName }}</span>
                          <a @click="toDetail(video)">
                            <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                          </a>
                          <p>{{ video.title }}</p>
                        </div>
                        <img :src="video.liveCenterImg"/>
                      </div>
                      <h3 class="vid-name"><a href="javascript:void(0)">{{ video.title }}</a></h3>
                      <div class="info">
                        <h5>主播：<a href="javascript:void(0)">{{video.anchorName }}</a></h5>
                        <span><i class="fa fa-calendar"></i>{{ $moment(video.liveTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
                        <!-- <span><i class="fa fa-heart"></i>1,200</span>-->
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!--   &lt;!&ndash;精选视频&ndash;&gt;
               <div class="box">
                 <div class="box-header">
                   <h2><i class="fa fa-globe"></i>精选视频</h2>
                 </div>
                 <div class="box-content">
                   <div class="row">
                     <div class="col-md-6">
                       <div class="wrap-vid">
                         <div class="zoom-container">
                           <div class="zoom-caption">
                             <span>Video's Tag</span>
                             <a @click="toDetail" >
                               <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                             </a>
                             <p>Video's Name</p>
                           </div>
                           <img src="../../static/images/7.jpg"/>
                         </div>
                         <h3 class="vid-name"><a href="javascript:void(0)">Video's Name</a></h3>
                         <div class="info">
                           <h5>By <a href="javascript:void(0)">Kelvin</a></h5>
                           <span><i class="fa fa-calendar"></i>25/3/2015</span>
                           <span><i class="fa fa-heart"></i>1,200</span>
                         </div>
                       </div>
                       <p class="more">Aenean feugiat in ante et blandit. Vestibulum posuere molestie risus, ac interdum
                         magna porta non. Pellentesque rutrum fringilla elementum. Curabitur tincidunt porta lorem vitae
                         accumsan.</p>
                       <a @click="toDetail"  class="btn btn-1">Read More</a>
                       <div class="line"></div>
                       <div class="post wrap-vid">
                         <div class="zoom-container">
                           <div class="zoom-caption">
                             <span>Video's Tag</span>
                             <a @click="toDetail" >
                               <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                             </a>
                             <p>Video's Name</p>
                           </div>
                           <img src="../../static/images/8.jpg"/>
                         </div>
                         <div class="wrapper">
                           <h5 class="vid-name"><a href="javascript:void(0)">Video's Name</a></h5>
                           <div class="info">
                             <h6>By <a href="javascript:void(0)">Kelvin</a></h6>
                             <span><i class="fa fa-calendar"></i>25/3/2015</span>
                             <span><i class="fa fa-heart"></i>1,200</span>
                           </div>
                         </div>
                       </div>
                       <div class="post wrap-vid">
                         <div class="zoom-container">
                           <div class="zoom-caption">
                             <span>Video's Tag</span>
                             <a @click="toDetail" >
                               <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                             </a>
                             <p>Video's Name</p>
                           </div>
                           <img src="../../static/images/9.jpg"/>
                         </div>
                         <div class="wrapper">
                           <h5 class="vid-name"><a href="javascript:void(0)">Video's Name</a></h5>
                           <div class="info">
                             <h6>By <a href="javascript:void(0)">Kelvin</a></h6>
                             <span><i class="fa fa-calendar"></i>25/3/2015</span>
                             <span><i class="fa fa-heart"></i>1,200</span>
                           </div>
                         </div>
                       </div>
                       <div class="post wrap-vid">
                         <div class="zoom-container">
                           <div class="zoom-caption">
                             <span>Video's Tag</span>
                             <a @click="toDetail" >
                               <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                             </a>
                             <p>Video's Name</p>
                           </div>
                           <img src="../../static/images/6.jpg"/>
                         </div>
                         <div class="wrapper">
                           <h5 class="vid-name"><a href="javascript:void(0)">Video's Name</a></h5>
                           <div class="info">
                             <h6>By <a href="javascript:void(0)">Kelvin</a></h6>
                             <span><i class="fa fa-calendar"></i>25/3/2015</span>
                             <span><i class="fa fa-heart"></i>1,200</span>
                           </div>
                         </div>
                       </div>
                     </div>
                     <div class="col-md-6">
                       <div class="wrap-vid">
                         <div class="zoom-container">
                           <div class="zoom-caption">
                             <span>Video's Tag</span>
                             <a @click="toDetail" >
                               <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                             </a>
                             <p>Video's Name</p>
                           </div>
                           <img src="../../static/images/9.jpg"/>
                         </div>
                         <h3 class="vid-name"><a href="javascript:void(0)">Video's Name</a></h3>
                         <div class="info">
                           <h5>By <a href="javascript:void(0)">Kelvin</a></h5>
                           <span><i class="fa fa-calendar"></i>25/3/2015</span>
                           <span><i class="fa fa-heart"></i>1,200</span>
                         </div>
                       </div>
                       <p class="more">Aenean feugiat in ante et blandit. Vestibulum posuere molestie risus, ac interdum
                         magna porta non. Pellentesque rutrum fringilla elementum. Curabitur tincidunt porta lorem vitae
                         accumsan.</p>
                       <a @click="toDetail"  class="btn btn-1">Read More</a>
                       <div class="line"></div>
                       <div class="post wrap-vid">
                         <div class="zoom-container">
                           <div class="zoom-caption">
                             <span>Video's Tag</span>
                             <a @click="toDetail" >
                               <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                             </a>
                             <p>Video's Name</p>
                           </div>
                           <img src="../../static/images/4.jpg"/>
                         </div>
                         <div class="wrapper">
                           <h5 class="vid-name"><a href="javascript:void(0)">Video's Name</a></h5>
                           <div class="info">
                             <h6>By <a href="javascript:void(0)">Kelvin</a></h6>
                             <span><i class="fa fa-calendar"></i>25/3/2015</span>
                             <span><i class="fa fa-heart"></i>1,200</span>
                           </div>
                         </div>
                       </div>
                       <div class="post wrap-vid">
                         <div class="zoom-container">
                           <div class="zoom-caption">
                             <span>Video's Tag</span>
                             <a @click="toDetail" >
                               <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                             </a>
                             <p>Video's Name</p>
                           </div>
                           <img src="../../static/images/5.jpg"/>
                         </div>
                         <div class="wrapper">
                           <h5 class="vid-name"><a href="javascript:void(0)">Video's Name</a></h5>
                           <div class="info">
                             <h6>By <a href="javascript:void(0)">Kelvin</a></h6>
                             <span><i class="fa fa-calendar"></i>25/3/2015</span>
                             <span><i class="fa fa-heart"></i>1,200</span>
                           </div>
                         </div>
                       </div>
                       <div class="post wrap-vid">
                         <div class="zoom-container">
                           <div class="zoom-caption">
                             <span>Video's Tag</span>
                             <a @click="toDetail" >
                               <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                             </a>
                             <p>Video's Name</p>
                           </div>
                           <img src="../../static/images/2.jpg"/>
                         </div>
                         <div class="wrapper">
                           <h5 class="vid-name"><a href="javascript:void(0)">Video's Name</a></h5>
                           <div class="info">
                             <h6>By <a href="javascript:void(0)">Kelvin</a></h6>
                             <span><i class="fa fa-calendar"></i>25/3/2015</span>
                             <span><i class="fa fa-heart"></i>1,200</span>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="line"></div>
               </div>
               &lt;!&ndash;热门视频&ndash;&gt;
               <div class="box">
                 <div class="box-header">
                   <h2><i class="fa fa-globe"></i>热门视频</h2>
                 </div>
                 <div class="box-content">
                   <div class="row">
                     <div class="col-md-6">
                       <div class="wrap-vid">
                         <div class="zoom-container">
                           <div class="zoom-caption">
                             <span>Video's Tag</span>
                             <a @click="toDetail" >
                               <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                             </a>
                             <p>Video's Name</p>
                           </div>
                           <img src="../../static/images/9.jpg"/>
                         </div>
                         <h3 class="vid-name"><a href="javascript:void(0)">Video's Name</a></h3>
                         <div class="info">
                           <h5>By <a href="javascript:void(0)">Kelvin</a></h5>
                           <span><i class="fa fa-calendar"></i>25/3/2015</span>
                           <span><i class="fa fa-heart"></i>1,200</span>
                         </div>
                       </div>
                       <p class="more">Aenean feugiat in ante et blandit. Vestibulum posuere molestie risus, ac interdum
                         magna porta non. Pellentesque rutrum fringilla elementum. Curabitur tincidunt porta lorem vitae
                         accumsan.</p>
                       <a @click="toDetail"  class="btn btn-1">Read More</a>
                     </div>
                     <div class="col-md-6">
                       <div class="post wrap-vid">
                         <div class="zoom-container">
                           <div class="zoom-caption">
                             <span>Video's Tag</span>
                             <a @click="toDetail" >
                               <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                             </a>
                             <p>Video's Name</p>
                           </div>
                           <img src="../../static/images/4.jpg"/>
                         </div>
                         <div class="wrapper">
                           <h5 class="vid-name"><a href="javascript:void(0)">Video's Name</a></h5>
                           <div class="info">
                             <h6>By <a href="javascript:void(0)">Kelvin</a></h6>
                             <span><i class="fa fa-calendar"></i>25/3/2015</span>
                             <span><i class="fa fa-heart"></i>1,200</span>
                           </div>
                         </div>
                       </div>
                       <div class="post wrap-vid">
                         <div class="zoom-container">
                           <div class="zoom-caption">
                             <span>Video's Tag</span>
                             <a @click="toDetail" >
                               <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                             </a>
                             <p>Video's Name</p>
                           </div>
                           <img src="../../static/images/5.jpg"/>
                         </div>
                         <div class="wrapper">
                           <h5 class="vid-name"><a href="javascript:void(0)">Video's Name</a></h5>
                           <div class="info">
                             <h6>By <a href="javascript:void(0)">Kelvin</a></h6>
                             <span><i class="fa fa-calendar"></i>25/3/2015</span>
                             <span><i class="fa fa-heart"></i>1,200</span>
                           </div>
                         </div>
                       </div>
                       <div class="post wrap-vid">
                         <div class="zoom-container">
                           <div class="zoom-caption">
                             <span>Video's Tag</span>
                             <a @click="toDetail" >
                               <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                             </a>
                             <p>Video's Name</p>
                           </div>
                           <img src="../../static/images/6.jpg"/>
                         </div>
                         <div class="wrapper">
                           <h5 class="vid-name"><a href="javascript:void(0)">Video's Name</a></h5>
                           <div class="info">
                             <h6>By <a href="javascript:void(0)">Kelvin</a></h6>
                             <span><i class="fa fa-calendar"></i>25/3/2015</span>
                             <span><i class="fa fa-heart"></i>1,200</span>
                           </div>
                         </div>
                       </div>
                       <div class="post wrap-vid">
                         <div class="zoom-container">
                           <div class="zoom-caption">
                             <span>Video's Tag</span>
                             <a @click="toDetail" >
                               <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                             </a>
                             <p>Video's Name</p>
                           </div>
                           <img src="../../static/images/7.jpg"/>
                         </div>
                         <div class="wrapper">
                           <h5 class="vid-name"><a href="javascript:void(0)">Video's Name</a></h5>
                           <div class="info">
                             <h6>By <a href="javascript:void(0)">Kelvin</a></h6>
                             <span><i class="fa fa-calendar"></i>25/3/2015</span>
                             <span><i class="fa fa-heart"></i>1,200</span>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="line"></div>
               </div>
               &lt;!&ndash;随机视频&ndash;&gt;
               <div class="box">
                 <div class="box-header">
                   <h2><i class="fa fa-play-circle-o"></i>随机视频</h2>
                 </div>
                 <div class="box-content">
                   <div class="row">
                     <div class="col-md-4">
                       <div class="wrap-vid">
                         <div class="zoom-container">
                           <div class="zoom-caption">
                             <span>Video's Tag</span>
                             <a @click="toDetail" >
                               <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                             </a>
                             <p>Video's Name</p>
                           </div>
                           <img src="../../static/images/3.jpg"/>
                         </div>
                         <h3 class="vid-name"><a href="javascript:void(0)">Video's Name</a></h3>
                         <div class="info">
                           <h5>By <a href="javascript:void(0)">Kelvin</a></h5>
                           <span><i class="fa fa-calendar"></i>25/3/2015</span>
                           <span><i class="fa fa-heart"></i>1,200</span>
                         </div>
                       </div>
                       <div class="wrap-vid">
                         <div class="zoom-container">
                           <div class="zoom-caption">
                             <span>Video's Tag</span>
                             <a @click="toDetail" >
                               <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                             </a>
                             <p>Video's Name</p>
                           </div>
                           <img src="../../static/images/4.jpg"/>
                         </div>
                         <h3 class="vid-name"><a href="javascript:void(0)">Video's Name</a></h3>
                         <div class="info">
                           <h5>By <a href="javascript:void(0)">Kelvin</a></h5>
                           <span><i class="fa fa-calendar"></i>25/3/2015</span>
                           <span><i class="fa fa-heart"></i>1,200</span>
                         </div>
                       </div>
                     </div>
                     <div class="col-md-4">
                       <div class="wrap-vid">
                         <div class="zoom-container">
                           <div class="zoom-caption">
                             <span>Video's Tag</span>
                             <a @click="toDetail" >
                               <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                             </a>
                             <p>Video's Name</p>
                           </div>
                           <img src="../../static/images/5.jpg"/>
                         </div>
                         <h3 class="vid-name"><a href="javascript:void(0)">Video's Name</a></h3>
                         <div class="info">
                           <h5>By <a href="javascript:void(0)">Kelvin</a></h5>
                           <span><i class="fa fa-calendar"></i>25/3/2015</span>
                           <span><i class="fa fa-heart"></i>1,200</span>
                         </div>
                       </div>
                       <div class="wrap-vid">
                         <div class="zoom-container">
                           <div class="zoom-caption">
                             <span>Video's Tag</span>
                             <a @click="toDetail" >
                               <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                             </a>
                             <p>Video's Name</p>
                           </div>
                           <img src="../../static/images/6.jpg"/>
                         </div>
                         <h3 class="vid-name"><a href="javascript:void(0)">Video's Name</a></h3>
                         <div class="info">
                           <h5>By <a href="javascript:void(0)">Kelvin</a></h5>
                           <span><i class="fa fa-calendar"></i>25/3/2015</span>
                           <span><i class="fa fa-heart"></i>1,200</span>
                         </div>
                       </div>
                     </div>
                     <div class="col-md-4">
                       <div class="wrap-vid">
                         <div class="zoom-container">
                           <div class="zoom-caption">
                             <span>Video's Tag</span>
                             <a @click="toDetail" >
                               <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                             </a>
                             <p>Video's Name</p>
                           </div>
                           <img src="../../static/images/7.jpg"/>
                         </div>
                         <h3 class="vid-name"><a href="javascript:void(0)">Video's Name</a></h3>
                         <div class="info">
                           <h5>By <a href="javascript:void(0)">Kelvin</a></h5>
                           <span><i class="fa fa-calendar"></i>25/3/2015</span>
                           <span><i class="fa fa-heart"></i>1,200</span>
                         </div>
                       </div>
                       <div class="wrap-vid">
                         <div class="zoom-container">
                           <div class="zoom-caption">
                             <span>Video's Tag</span>
                             <a @click="toDetail" >
                               <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                             </a>
                             <p>Video's Name</p>
                           </div>
                           <img src="../../static/images/8.jpg"/>
                         </div>
                         <h3 class="vid-name"><a href="javascript:void(0)">Video's Name</a></h3>
                         <div class="info">
                           <h5>By <a href="javascript:void(0)">Kelvin</a></h5>
                           <span><i class="fa fa-calendar"></i>25/3/2015</span>
                           <span><i class="fa fa-heart"></i>1,200</span>
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="line"></div>
               </div>-->
            <div class="line"></div>

          </div>
          <!--todo 后面这个要扩展，现在第一版本先注释掉-->
          <!-- <div id="sidebar" class="col-md-4">
             &lt;!&ndash;&#45;&#45; Start Widget &#45;&#45;&ndash;&gt;
               <div class="widget wid-follow">
                 <div class="heading"><h4><i class="fa fa-users"></i> Follow Us</h4></div>
                 <div class="content">
                   <ul class="list-inline">
                     <li>
                       <a href="facebook.com/">
                         <div class="box-facebook">
                           <span class="fa fa-facebook fa-2x icon"></span>
                           <span>1250</span>
                           <span>Fans</span>
                         </div>
                       </a>
                     </li>
                     <li>
                       <a href="facebook.com/">
                         <div class="box-twitter">
                           <span class="fa fa-twitter fa-2x icon"></span>
                           <span>1250</span>
                           <span>Fans</span>
                         </div>
                       </a>
                     </li>
                     <li>
                       <a href="facebook.com/">
                         <div class="box-google">
                           <span class="fa fa-google-plus fa-2x icon"></span>
                           <span>1250</span>
                           <span>Fans</span>
                         </div>
                       </a>
                     </li>
                   </ul>
                   <img src="../../static/images/banner.jpg"/>
                 </div>
                 <div class="line"></div>
               </div>
             &lt;!&ndash;&#45;&#45; Start Widget &#45;&#45;&ndash;&gt;
             <div class="widget wid-tags">
               <div class="heading"><h4><i class="fa fa-tags"></i>分类</h4></div>
               <div class="content">
                 <ul class="list-inline">
                   <li><a href="javascript:void(0)">商务,</a></li>
                   <li><a href="javascript:void(0)">导购,</a></li>
                   <li><a href="javascript:void(0)">公司内部,</a></li>
                   <li><a href="javascript:void(0)">总部 ,</a></li>
                   <li><a href="javascript:void(0)">美家 ,</a></li>
                   <li><a href="javascript:void(0)">行政 ,</a></li>
                 </ul>
               </div>
               <div class="line"></div>
             </div>
             &lt;!&ndash;&#45;&#45; Start Widget &#45;&#45;&ndash;&gt;
              <div class="widget wid-post">
                <div class="heading"><h4><i class="fa fa-globe"></i>分类</h4></div>
                <div class="content">
                  <div class="post wrap-vid">
                    <div class="zoom-container">
                      <div class="zoom-caption">
                        <span>Video's Tag</span>
                        <a @click="toDetail" >
                          <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                        </a>
                        <p>Video's Name</p>
                      </div>
                      <img src="../../static/images/7.jpg"/>
                    </div>
                    <div class="wrapper">
                      <h5 class="vid-name"><a href="javascript:void(0)">Video's Name</a></h5>
                      <div class="info">
                        <h6>By <a href="javascript:void(0)">Kelvin</a></h6>
                        <span><i class="fa fa-calendar"></i>25/3/2015</span>
                        <span><i class="fa fa-heart"></i>1,200</span>
                      </div>
                    </div>
                  </div>
                  <div class="post wrap-vid">
                    <div class="zoom-container">
                      <div class="zoom-caption">
                        <span>Video's Tag</span>
                        <a @click="toDetail" >
                          <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                        </a>
                        <p>Video's Name</p>
                      </div>
                      <img src="../../static/images/8.jpg"/>
                    </div>
                    <div class="wrapper">
                      <h5 class="vid-name"><a href="javascript:void(0)">Video's Name</a></h5>
                      <div class="info">
                        <h6>By <a href="javascript:void(0)">Kelvin</a></h6>
                        <span><i class="fa fa-calendar"></i>25/3/2015</span>
                        <span><i class="fa fa-heart"></i>1,200</span>
                      </div>
                    </div>
                  </div>
                  <div class="post wrap-vid">
                    <div class="zoom-container">
                      <div class="zoom-caption">
                        <span>Video's Tag</span>
                        <a @click="toDetail" >
                          <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                        </a>
                        <p>Video's Name</p>
                      </div>
                      <img src="../../static/images/9.jpg"/>
                    </div>
                    <div class="wrapper">
                      <h5 class="vid-name"><a href="javascript:void(0)">Video's Name</a></h5>
                      <div class="info">
                        <h6>By <a href="javascript:void(0)">Kelvin</a></h6>
                        <span><i class="fa fa-calendar"></i>25/3/2015</span>
                        <span><i class="fa fa-heart"></i>1,200</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="line"></div>
              </div>
             &lt;!&ndash;&#45;&#45; Start Widget &#45;&#45;&ndash;&gt;
             <div class="widget wid-news top-news">
               <div class="heading"><h4><i class="fa fa-clock-o"></i>热播排行</h4></div>
               <div class="content">
                 <div class="wrap-vid">
                   <div class="zoom-container">
                     <div class="zoom-caption">
                       <span>1</span>
                       <a @click="toDetail">
                         <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                       </a>
                       <p>Video's Name</p>
                     </div>
                     <img src="../../static/images/3.jpg"/>
                   </div>
                   <h3 class="vid-name"><a href="javascript:void(0)">Video's Name</a></h3>
                   <div class="info">
                     <h5>By <a href="javascript:void(0)">Kelvin</a></h5>
                     <span><i class="fa fa-calendar"></i>25/3/2015</span>
                     <span><i class="fa fa-heart"></i>1,200</span>
                   </div>
                 </div>
                 <div class="wrap-vid">
                   <div class="zoom-container">
                     <div class="zoom-caption">
                       <span>2</span>
                       <a @click="toDetail">
                         <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                       </a>
                       <p>Video's Name</p>
                     </div>
                     <img src="../../static/images/4.jpg"/>
                   </div>
                   <h3 class="vid-name"><a href="javascript:void(0)">Video's Name</a></h3>
                   <div class="info">
                     <h5>By <a href="javascript:void(0)">Kelvin</a></h5>
                     <span><i class="fa fa-calendar"></i>25/3/2015</span>
                     <span><i class="fa fa-heart"></i>1,200</span>
                   </div>
                 </div>
                 <div class="wrap-vid">
                   <div class="zoom-container">
                     <div class="zoom-caption">
                       <span>3</span>
                       <a @click="toDetail">
                         <i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
                       </a>
                       <p>Video's Name</p>
                     </div>
                     <img src="../../static/images/5.jpg"/>
                   </div>
                   <h3 class="vid-name"><a href="javascript:void(0)">Video's Name</a></h3>
                   <div class="info">
                     <h5>By <a href="javascript:void(0)">Kelvin</a></h5>
                     <span><i class="fa fa-calendar"></i>25/3/2015</span>
                     <span><i class="fa fa-heart"></i>1,200</span>
                   </div>
                 </div>
               </div>
               <div class="line"></div>
             </div>
             &lt;!&ndash;&#45;&#45; Start Widget &#45;&#45;&ndash;&gt;
             <div class="widget wid-post">
               <div class="heading"><h4><i class="fa fa-comments"></i> Comment</h4></div>
               <div class="content">
                 <div class="post">
                   <a @click="toDetail">
                     <img src="../../static/images/user.png"/>
                   </a>
                   <div class="wrapper">
                     <a href="javascript:void(0)"><h5>Curabitur tincidunt porta lorem.</h5></a>
                     <ul class="list-inline">
                       <li><i class="fa fa-calendar"></i>25/3/2015</li>
                       <li><i class="fa fa-comments"></i>1,200</li>
                     </ul>
                   </div>
                 </div>
                 <div class="post">
                   <a @click="toDetail">
                     <img src="../../static/images/user.png"/>
                   </a>
                   <div class="wrapper">
                     <a href="javascript:void(0)"><h5>Curabitur tincidunt porta lorem.</h5></a>
                     <ul class="list-inline">
                       <li><i class="fa fa-calendar"></i>25/3/2015</li>
                       <li><i class="fa fa-comments"></i>1,200</li>
                     </ul>
                   </div>
                 </div>
                 <div class="post">
                   <a @click="toDetail">
                     <img src="../../static/images/user.png"/>
                   </a>
                   <div class="wrapper">
                     <a href="javascript:void(0)"><h5>Curabitur tincidunt porta lorem.</h5></a>
                     <ul class="list-inline">
                       <li><i class="fa fa-calendar"></i>25/3/2015</li>
                       <li><i class="fa fa-comments"></i>1,200</li>
                     </ul>
                   </div>
                 </div>
               </div>
               <div class="line"></div>
             </div>
             <div class="widget wid-banner">
               <img src="../../static/images/banner-2.jpg"/>
             </div>
           </div>-->
        </div>
      </div>

    </div>
    <footer-view/>
    <!-- 底部内容 -->
  </div>
</template>

<script>
  import {carouse} from '../../static/owl-carousel/owl.carousel'
  import {searchinput} from '../../static/js/zySearch'
  import {videoAPI} from '../api/index'
  import $ from 'jquery'

  import headerView from '@/components/Header/index'
  import footerView from '@/components/Footer/index'

  export default {
    name: 'index',
    components: {
      // 注册组件
      headerView,
      footerView
    },
    data () {
      return {
        topFlag: true,
        loginUser: {
          userCode: this.$root.uid,
          userName: this.$root.username,
          userEmail: this.$root.email,
        },
        bannerList: [
          {
            img: '../../static/../../static/images/dog2.jpg'
          },
          {
            img: '../../static/../../static/images/dog3.jpg'
          },
          {
            img: '../../static/../../static/images/dog4.jpg'
          }
        ],
        swiperOption: {
          showDots: true, // 是否显示分页器
          interval: 3000, // 轮播间隔时间，默认3s
          autoplay: true, // 是否自动播放
          loop: true // 是否循环轮播
        },
        swapperEffect: 'normal',
        videoFormData: {
          mainVideo: {}, // 主视频
          subVideo: [], // 次主视频
          newLasted: [], // 最新视频
          carousel: []
        },
        videoTypeList: [
          {label: '未开播'}, {label: '正在播放'}, {label: '直播结束'}, {label: '回看'}
        ],
      }
    },
    mounted () {
      this.initIndexData()
       //window.location.href = "https://yslive.yunshanmeicai.com/liveview/#/detail?liveNo=ZB20051809571701"
    },
    created () {
      carouse($)
      searchinput($)
      this.initCarous()
    },
    methods: {
      initCarous () {
        var _self = this
        this.$nextTick(function () {
          $('#zySearch').zySearch({
            'width': '355',
            'height': '33',
            'parentClass': 'pageTitle',
            'callback': function (keyword) {
              var param = {
                searchKeywords: keyword
              }

              videoAPI.videoSearch(param, res => {
                if (res) {
                  _self.videoFormData.newLasted = res
                }
              })
            }
          })
        })
      },
      toDetail (row) {
        // 传值
        if (row.type == 0) {
          this.$router.push({path: '/detail', query: {liveNo: row.liveNo}})
        } else {
          this.$router.push({path: '/backVideoDetail', query: {liveNo: row.liveNo}})
        }
      },
      initIndexData () {
        let _self = this
        videoAPI.getIndexVideo(_self.loginUser, res => {  // 获取首页数据
          if (res) {
            if (res.mainVideo) {
              if (res.mainVideo.type == 1) {
                res.mainVideo.liveStatusName = _self.videoTypeList[3].label
              } else {
                res.mainVideo.liveStatusName = _self.videoTypeList[res.mainVideo.liveStatus].label
              }
            }
            res.subVideo.forEach((el, index) => {
              // type 为1 表示回看
              // liveStatus  直播状态(0未直播 1 正在播放 2 直播结束)

              if (el.type == 1) {
                el.liveStatusName = _self.videoTypeList[3].label
              } else {
                el.liveStatusName = _self.videoTypeList[el.liveStatus].label
              }
            })
            res.newLasted.forEach((el, index) => {
              if (el.type == 1) {
                el.liveStatusName = _self.videoTypeList[3].label
              } else {
                el.liveStatusName = _self.videoTypeList[el.liveStatus].label
              }
            })
            res.carousel.forEach((el, index) => {
              if (el.type == 1) {
                el.liveStatusName = _self.videoTypeList[3].label
              } else {
                el.liveStatusName = _self.videoTypeList[el.liveStatus].label
              }

            })
            _self.videoFormData = res
            this.$nextTick(function () {
              $('#owl-demo').owlCarousel({
                autoPlay: 3000,
                items: 1,
                autoHeight: true,
                itemsDesktop: [1199, 1],
                itemsDesktopSmall: [979, 1],
                itemsTablet: [768, 1],
                itemsMobile: [479, 1],
                scrollPerPage: false,
                responsive: false,
              })
            })
          }
        })
      },
    }
  }
</script>

<style>

  .container {
    width: 80%;
  }


  .fa {
    margin-right: 10px;
  }

  .sub-vid img {
    height: 190px;
  }

  @media screen and (min-width: 1200px) {
    .wrap-vid img {
      height: 500px;
    }

    .mainImg {
      height: 600px;
    }

    .subImg {
      height: 300px;
    }

    .owl-wrapper-outer img {
      height: 800px;
    }

  }

  @media screen and (min-width: 768px) {
    .wrap-vid img {
      height: 400px;
    }

    .mainImg {
      height: 500px;
    }

    .subImg {
      height: 250px;
    }

    .owl-wrapper-outer img {
      height: 700px;
    }
  }


  .top-news img {
    height: 200px;
  }


  .huikan {
    background: #E6A23C !important;
  }

  .moving {
    background: #67C23A !important;
  }

  .overed {
    background: #909399 !important;
  }

  .zoom-container {
    margin-bottom: 10px;
    width: 100%;
  }


  hr {
    margin-top: 0px !important;
  }
</style>
